<template>
  <div class="box">
    <div class="mainBox">
      <h3>{{ book.name }}</h3>
      <div class="bigBox">
        <div class="leftChapterBox">
          <ul class="chapterBox">
            <li @click="findChapter(chapter)" :class="{ active: chapter == selectChapter }"
              v-for="chapter in book.chapterList">
              <span class="text-ellipsis" :title="chapter.name">{{ chapter.name }}</span>
            </li>
          </ul>
        </div>
        <div class="rightContentBox">
          <div class="title">
            <h4><span>{{ selectChapter.name }}</span></h4>
          </div>
          <div class="content">
            <v-md-editor v-model="chapterContent.content" mode="preview"></v-md-editor>
          </div>
        </div>
        <div class="selectBox">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue"
import categorybox from "@/components/home/categorybox/index.vue"
import hotBox from "@/components/home/hot/index.vue"
import tagBox from "@/components/home/tag/index.vue"
export default {
  components: {
    hotBox,
    tagBox
  },
  data() {
    return {
      book: {},
      chapterContent: { content: "" },
      selectChapter: {}
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      let id = this.$route.query.id
      this.$axios.get(`/home/blog/findBookAndChapters?id=${id}`).then(({ data }) => {
        if (data.code == 0) {
          this.book = data.T
          if (this.book.chapterList && this.book.chapterList.length > 0) {
            this.selectChapter = this.book.chapterList[0]
            this.loadChapterContent(this.book.chapterList[0].id)
          }
        } else {

        }
      }).catch(() => {

      })
    },
    loadChapterContent(id) {
      this.$axios.get(`/home/blog/findChapterContent?chapterId=${id}`).then(({ data }) => {
        if (data.code == 0) {
          this.chapterContent = data.T || { content: "暂无数据" }
        }
      })
    },
    findChapter(chapter) {
      if(this.selectChapter == chapter){
        return
      }
      this.selectChapter = chapter
      this.loadChapterContent(chapter.id)
    }
  }
}
</script>

<style scoped>
.box::after {
  width: 100%;
  height: 100%;
  /*设置为全屏背景模式*/
  position: absolute;
  /*图片定位*/
  background-size: cover;
  top: 0;
  left: 0;
  content: "";
  z-index: -1;
  background-image: url("../images/bg_1.jpg");
  opacity: 0.4;
}

/* @import url(); 引入css类 */
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.active {
  background-color: rgba(128, 126, 126, 0.336);
}

.selectBox {
  width: calc(100% - 85%);
}

.box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.mainBox {
  width: 80%;
  padding-top: 20px;
}

.mainBox>h3 {
  font-weight: 500;
  text-align: center;
}

.bigBox {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: calc(100% - 25px);
}

.leftChapterBox {
  width: 20%;
  height: 100%;
}

.chapterBox {
  list-style: none;
  border-right: 1px dashed rgba(172, 170, 170, 0.226);
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.chapterBox>li {
  line-height: 30px;
  font-size: large;
  line-height: 40px;
}

.chapterBox>li:hover>span {
  background-color: #1890ff;
  color: #ffffff;
  cursor: url("../images/arr112.png"), pointer;
  animation: myAnmis 1.5s infinite;
  animation-direction: alternate;
}

@keyframes myAnmis {
  from {
    transform: rotate(0deg);
    transform: scale(0.8);
  }

  50% {
    padding-left: 10px;
    transform: rotate(2deg);
  }

  75% {
    transform: rotate(-2deg);
  }

  to {
    transform: rotate(0deg);
    transform: scale(1);
  }
}

.rightContentBox {
  width: calc(100% - 20%);
}

@media (max-width: 1600px) {
  .mainBox{
    width: 100%;
  }
  .bigBox {
    width: calc(100% - 0%);
  }

  .rightContentBox {
    width: calc(100% - 0%);
  }
}

.title {
  text-align: center;
  line-height: 20px;
}

.title:hover span {
  display: inline-block;
  animation: textRotateY 5s infinite, textColorChange 300ms infinite 0.2s;
  animation-direction: alternate;
}

@keyframes textRotateY {
  0% {
    transform: rotateY(10deg);
  }

  50% {
    transform: rotateY(90deg);
  }

  100% {
    transform: rotateY(0deg);
  }
}

@keyframes textColorChange {
  0% {
    background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  50% {}

  100% {
    background: linear-gradient(60deg, rgb(173, 162, 218) 0%, rgb(201, 14, 189) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.content {
  margin: 5px;
  word-wrap: break-word;
  height: calc(100% - 30px);
  overflow-y: auto;
}

.rightContentBox:hover {
  cursor: url("../images/arr112.png"), pointer;
}
</style>